<template>
 <div class="c">
   <div class="wx-home">

     <Card style="width:320px">
        <div style="text-align:center">
            <img src="static/user/qq.png" width="200" height="200">
            <p>多位客服为你全方位服务推荐使用</p>
            <h3><a href="tencent://message/?uin=2665227177&Site=QQ交谈&Menu=yes target=blankimghttp://wpa.qq.com/pa?p=1:" target="_blank">QQ咨询</a></h3>
        </div>
    </Card>
    <Card style="width:320px">
        <div style="text-align:center">
            <img src="static/user/wx.png" width="190" height="200">
            <p>线上客服实时答疑，随时掌上联系</p>
            <h3 class="wxtxt" @click="modal=true">微信咨询</h3>
        </div>
    </Card>
  </div>
  <div class="fooer">
    合作、友链、投诉、建议请联系：邮箱：2665227177@qq.com / 电话：17683240225，备注：不接受任何广告投放及宣传之类的事务；
  </div>
     <Modal v-model="modal" width="400" @on-visible-change='cancel' >
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>扫描下方二维码添加微信</span>
        </p>
        <div>
           <img style="border-radius:20px" src="static/user/user.png" width="350" height="350">
        </div>
         <template #footer>
               <div class="v"></div>
            </template>
     </Modal>
 </div>
</template>

<script>
import store from '@/vuex/store';
// import { mapState, mapMutations } from 'vuex';
import Distpicker from 'v-distpicker';
export default {
  name: 'MyAddress',
  data () {
    return {
      modal: false
    };
  },
  created () {

  },
  computed: {
    // ...mapState(['userOrder', 'seckills'])
  },
  components: {
    Distpicker
  },
  store
};
</script>
<style scoped>
.wx-home{
  width:1500px;
  height:300px;
  display:flex;
  justify-content: space-around;
}
.wxtxt{
  color: #2d8cf0;
  cursor: pointer;
}
h3{
  margin-top:15px
}
.fooer{
  margin: 350px auto 50px;
  width:1600px;
  font-size: 18px;
  text-align: center;
}
</style>
